<!DOCTYPE html>
<!-- 岗位详细信息 -->
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>岗位详细信息</title>
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <link rel="stylesheet" href="../../css/jobDetail.css" media="all">
    <link rel="stylesheet" href="../../css/ok/oksub.css">
    <style type="text/css">
        pre {
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
        }
    </style>
    <script type="text/javascript" src="../../libs/loading/okLoading.js"></script>
    <!-- 岗位顶部模板   -->
    <script id="tpl_detail_head" type="text/html">
        <div class="layui-col-md4">
            <h1>{{d.jobname}}</h1>
        </div>
        <div class="layui-col-md3" style="margin:0 auto;text-align:center;">
            <span class="salary">{{d.jobsalary}}</span>
        </div>
    </script>
    <!-- 福利标签模板   -->
    <script id="tpl_job_welfare" type="text/html">
        {{#  layui.each(d.list, function(index, item){ }}
        <span>{{item}}</span>
        {{#  }); }}

        {{#  if(d.list.length === 0){ }}
        <span>无</span>
        {{#  } }}
    </script>
    <!-- 职位描述模板   -->
    <script id="tpl_job_content" type="text/html">
        <div class="layui-row" style="margin-top:20px">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h2>职位描述</h2>
                </div>
                <div class="layui-card-body job_sy_color">
                    <pre>{{d.descriptionofjob}}</pre>
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-top:20px">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h2>岗位要求</h2>
                </div>
                <div class="layui-card-body job_sy_color">
                    <pre>{{d.jobrequirement}}</pre>
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-top:20px">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h2 style="width: 50%; float: left;">公司介绍</h2>
                </div>
                <div class="layui-card-body job_sy_color">
                    {{d.enterprise.authInfomation.companyprofile}}
                </div>
            </div>
        </div>

        <div class="layui-row" style="margin-top:20px">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h2>工作地址</h2>
                </div>
                <div class="layui-card-body job_sy_color">
                    <p>{{d.workplace}}</p>
                </div>
            </div>
        </div>
    </script>
    <!--  右侧企业信息  -->
    <script id="tpl_company" type="text/html">
        <div class="layui-card-header">
            <a href=""><h2>{{d.enterprisename}}</h2></a>
        </div>
        <div class="layui-card-body job_sy_color">
            <p><i class="icon-stage"></i>{{d.authInfomation.enterprisetype}}</p>
            <p><i class="icon-scale"></i>{{d.authInfomation.scale}}</p>
            <p><i class="icon-industry"></i>{{d.authInfomation.industry}}</p>
            <!--            <p><i class="icon-net"></i>http://www.seeyon.com</p>-->
        </div>
    </script>
</head>
<body>
<!-- 岗位基础 -->
<div class="layui-container-md job_synopsis">
    <div class="layui-row">
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md7  inner_content_left">
            <div class="layui-row job_name" id="dta_jobHead">
                <!--    职位顶部渲染数据部分     -->
            </div>

            <div class="layui-row job_welfare">
                <div class="tag_more"></div>
                <div class="tag-all job-tags" id="dta_job_welfare">
                    <!--   公司福利渲染      -->
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md1">&nbsp;</div>
</div>
<!-- 岗位基础end -->
<!-- 职位详细 -->
<div class="layui-container-md ">
    <div class="layui-row">
        <div class="layui-col-md11" style="border-right:3px solid #f2f5fa;">
            <div class="layui-col-md1">&nbsp;</div>
            <div class="layui-col-xs4 layui-col-sm7 layui-col-md9  inner_content_left" id="dta_job_content">
                <!--    职位详细渲染数据部分            -->
            </div>
        </div>
    </div>
    <!-- 右侧结束-->
</div>
<script src="../../libs/layui/layui.js"></script>
<script>
    //岗位标识符
    let jobid;

    function initForm(data) {
        jobid = data;
        console.log(jobid)
    }

    layui.use(['element', 'layer', 'jquery', 'laytpl', 'okLayer', 'okUtils'], function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let laytpl = layui.laytpl;
        let okLayer = layui.okLayer;


        var jobtypename;

        //如果jobid为null则关闭窗口
        if (jobid == null) {
            okLayer.greenTickMsg("数据请求出错，刷新后重试", function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });
        }
        // 获取contentText
        const ctx = function () {
            let pathName = document.location.pathname;
            let index = pathName.substr(1).indexOf("/");
            let result = pathName.substr(0, index + 1);
            return result;
        }();

        //得到模板样式
        var tplHead = document.getElementById('tpl_detail_head').innerHTML;
        var tplcontent = document.getElementById('tpl_job_content').innerHTML;
        var tplwelfare = document.getElementById('tpl_job_welfare').innerHTML;
        var tplcompany = document.getElementById('tpl_company').innerHTML;
        //开始渲染数据
        laodjobdetail();

        //渲染岗位数据
        function laodjobdetail() {
            $.ajax({
                //请求地址
                url: ctx + "/ygssecs/getjobdetailbyid",
                //请求方式
                type: "get",
                data: {jobid: jobid},
                //数据，json字符串
                dataType: "JSON",
                //请求成功
                success: function (result) {
                    console.log(result);
                    if (result.code == 200) {
                        okLoading.close();
                        var jobdata = result.data;
                        //渲染头部
                        laytpl(tplHead).render(jobdata, function (html) {
                            document.getElementById('dta_jobHead').innerHTML = html;
                            // layer.msg('数据渲染成功', {icon: 1, time: 2000});
                        });
                        //头部渲染结束
                        //公司福利渲染
                        var welfarestr = jobdata.corporatebenefits;
                        var welfarearr = new Array();
                        welfarearr = welfarestr.split(",");
                        var welfaredata = {
                            "title": "福利",
                            "list": welfarearr
                        }
                        laytpl(tplwelfare).render(welfaredata, function (html) {
                            document.getElementById('dta_job_welfare').innerHTML = html;
                            // layer.msg('数据渲染成功', {icon: 1, time: 2000});
                        });
                        //公司福利结束
                        //渲染岗位数据
                        laytpl(tplcontent).render(jobdata, function (html) {
                            document.getElementById('dta_job_content').innerHTML = html;
                            // layer.msg('数据渲染成功', {icon: 1, time: 2000});
                        });
                        //岗位数据结束
                        //渲染右侧公司数据
                        var companydata = jobdata.enterprise;
                        jobtypename = jobdata.jobType.typename;
                        laytpl(tplcompany).render(companydata, function (html) {
                            document.getElementById('dta_company').innerHTML = html;
                        })
                    } else {
                        okLayer.greenTickMsg(result.msg, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    }

                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                    layer.msg('数据获取失败', {
                        icon: 5,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        location.reload()
                    });
                }
            });
        }

        //申请按钮触发事件
        $('#addnotebook').on("click", function () {
            layer.open({
                //调整弹框的大小
                title: ["留言", ' text-align: center;'],
                area: ['600px', '250px'],
                shadeClose: true,//点击旁边地方自动关闭
                //动画
                anim: 2,
                //弹出层的基本类型
                type: 2,
                //刚才定义的弹窗页面
                content: ['leavingMsg.html', 'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        });
    });
</script>
</body>

</html>